<template>
  <el-dialog
    :title="title"
    v-model:visible="visible"
    width="30%"
    :before-close="handleClose"
  >
    <span>{{ content }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">{{ cancelButtonText }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ confirmButtonText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '提示'
  },
  content: {
    type: String,
    default: ''
  },
  confirmButtonText: {
    type: String,
    default: '确定'
  },
  cancelButtonText: {
    type: String,
    default: '取消'
  }
});

const emit = defineEmits(['confirm', 'cancel', 'close']);

const visible = ref(false);

const open = () => {
  visible.value = true;
};

const handleClose = (done: () => void) => {
  emit('close');
  done();
};

const handleConfirm = () => {
  emit('confirm');
  visible.value = false;
};

const handleCancel = () => {
  emit('cancel');
  visible.value = false;
};

defineExpose({ open });
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>